<template>
	<div id="site">
		<site></site>

		<div class="fiexd-btn fiexd-btn-home" @click="goHome">
			<svg style="width: 25px;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M512 128 128 447.936V896h255.936V640H640v256h255.936V447.936z"></path></svg>
		</div>

		<div class="fiexd-btn fiexd-btn-user">
			<div v-if="user" class="user" @click="showUserInfo">
				<el-image :src="user.head">
					<template #error>
					          <svg style="width: 25px;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M288 320a224 224 0 1 0 448 0 224 224 0 1 0-448 0zm544 608H160a32 32 0 0 1-32-32v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 0 1-32 32z"></path></svg>
					        </template>
				</el-image>
			</div>
			<div v-else class="no-user" @click="showLoginPage">登录</div>
		</div>

		<el-backtop class="fiexd-btn-backtop" target="#site-box .scrollbar .el-scrollbar__wrap"></el-backtop>

		<!-- <loginBox v-model="showLoginBox" @login-success="showLoginBox=false"></loginBox> -->

		<el-dialog title="我的信息" v-model="showUserInfoBox" v-if="userInfo" width="30%">
			<el-form :model="userInfo">
				<el-form-item label="头像" label-width="60px">
					<div style="display: flex;gap:20px;">
						<el-image v-if="userInfo.head" :src="userInfo.head" style="width: 40px;height: 40px;"></el-image>
						<!-- <uploadImage action="/user/user/uploadHead" @success="uploadHeadSuccess" text="更换头像"></uploadImage> -->
					</div>
				</el-form-item>
				<!-- <el-form-item label="昵称" label-width="60px">
					<div style="display: flex;gap:20px;">
						<el-input v-model="newName" placeholder="修改昵称"></el-input>
						<el-button type="primary" :disabled="!newName || newName == userInfo.nickName" @click="updateName">确认修改</el-button>
					</div>
				</el-form-item>
				<el-form-item label="性别" label-width="60px">
					<el-select v-model="userInfo.gender" placeholder="修改性别" @change="updateGender">
						<el-option value="保密"></el-option>
						<el-option value="男"></el-option>
						<el-option value="女"></el-option>
					</el-select>
				</el-form-item> -->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="danger" @click="logout">退出登录</el-button>
				<el-button @click="showUserInfoBox = false">关 闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { updateName, updateGender, logOut } from '@/api/user.js';
// import loginBox from '@/components/LoginBox.vue';
import uploadImage from '@/components/uploadImage.vue';
import config from '@/config/index.js';
import site from '@/components/site/Index.vue';
export default {
	data() {
		return {
			showUserInfoBox: false,
			userInfo: null,
			newName: '',
			// showLoginBox: false
		};
	},
	methods: {
		showLoginPage(){
			this.$store.dispatch("user/openLoginPage",this.$route.fullPath)
		},
		showUserInfo() {
			let user = this.$store.state.user.user;
			this.userInfo = {
				nickName: user.nickName,
				head: user.head,
				gender: user.gender || '保密'
			};
			this.newName = user.nickName;
			this.showUserInfoBox = true;
		},
		updateName() {
			updateName(this.newName).then(res => {
				if (res.code == 200) {
					this.$message.success('修改成功');
					this.userInfo.nickName = this.newName;
					this.$store.state.user.user.nickName = this.newName;
				} else {
					this.$msgError(res);
				}
			});
		},
		updateGender() {
			updateGender(this.userInfo.gender).then(res => {
				if (res.code == 200) {
					this.$message.success('修改成功');
					this.$store.state.user.user.gender = this.userInfo.gender;
				} else {
					this.$msgError(res);
				}
			});
		},
		logout() {
			this.$confirm('确定退出登录?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.showUserInfoBox = false;
					logOut().then(res => {
						if (res.code == 200) {
							this.$store.commit('user/logOut');
						} else {
							console.log(res)
						}
					});
				})
				.catch(() => {});
		},
		random(a, b) {
			if (isNaN(a)) {
				a = 0x7ffffff;
			}
			if (isNaN(b)) {
				return Math.floor(Math.random() * a);
			}
			return Math.floor(Math.random() * (b - a)) + a;
		},
		uploadHeadSuccess(res) {
			if ((res && res.startsWith('http://')) || res.startsWith('https://')) {
				this.$store.state.user.user.head = res;
				this.userInfo.head = res;
			} else {
				this.$store.state.user.user.head = config.STATIC_URL + res;
				this.userInfo.head = config.STATIC_URL + res;
			}
		},
		goHome() {
			this.$router.push('/');
		}
	},
	created() {},
	computed: {
		user() {
			return this.$store.state.user.user;
		}
	},
	components: {
		// loginBox,
		site,
		uploadImage
	}
};
</script>

<style lang="scss">
#site {
	height: 100%;
	display: flex;
	width: 100%;
	background-color: #f3f6f8;

	//消除滚动条
	.el-aside::-webkit-scrollbar {
		display: none;
	}
	
	.fiexd-btn-backtop {
		right: 30px !important;
		bottom: 200px !important;
	}
	.fiexd-btn-home {
		right: 30px !important;
		bottom: 150px !important;
	}

	.fiexd-btn-user {
		right: 30px !important;
		bottom: 100px !important;
		.image-slot {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.logout {
			display: none;
		}
		.no-user {
			font-size: 12px;
		}
		.user {
			width: 100%;
			height: 100%;
			.el-image {
				border-radius: 50%;
				width: 100%;
				height: 100%;
			}
			.el-image__wrapper{
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		&:hover {
			box-shadow: 0 0 6px rgb(67, 110, 120, 0.8);
		}
	}
	.fiexd-btn-add {
		right: 30px !important;
		bottom: 50px !important;
	}
}

@media screen and (max-width: 1550px) {
}
@media screen and (max-width: 1370px) {
}
@media screen and (max-width: 850px) {
}
@media screen and (max-width: 650px) {
	#site {
		.content {
			width: 95%;
		}
		.fiexd-btn {
			right: 5px !important;
		}
		.fiexd-btn-backtop {
			right: 5px !important;
		}
	}
}
</style>
